<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">电影天堂</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#" onclick="loadHomePage()">首页</a></li>
                        <li>
                            <form class="navbar-form navbar-left" role="search" onsubmit="doSearch(event)">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="keyword" placeholder="搜索电影...">
                                </div>
                                <button type="submit" class="btn btn-default">搜索</button>
                            </form>
                        </li>
                        <li><a href="#" onclick="loadStarPage()">我的收藏</a></li>
                        <li><a href="#" onclick="loadLoginPage()">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">安全退出</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div id="outer">

</div>

<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script>
    //等所有的dom元素加载完毕之后,就会立即执行里面的Js代码
    $(document).ready(function () {
        loadHomePage();
    });

    /*$(function () {
        let token = localStorage.getItem("token");
        console.log(token)

        let outer = document.getElementById("outer");
        //从本地存储中获取token值,然后将这个token一起发送到后台
        //发送ajax请求到后台 - 查询所有数据/分页数据   res
        $.get('/dev/index/user?token=' + token, function (res) {
            let list = res.data.list;
            let str = "";
            for (let i = 0; i < list.length; i++) {
                str += list[i].username + "<br>"
            }
            outer.innerHTML = str;
        })
    })*/

    /* 获取电影详情 */
    function gameDetail(id) {
        window.postMessage({ type: 'detail', id: id }, '*');
        $('#outer').load('/dev/views/detail.html', function(response, status, xhr) {
            if (status == "error") {
                $('#outer').html("<p>加载详情页面失败。</p>");
            }
        });
    }

    /* 搜索功能 */
    function doSearch(event) {
        event.preventDefault();
        let keyword = document.getElementsByName("keyword")[0].value;
        window.postMessage({ type: 'search', keyword: keyword }, '*');
        $('#outer').load('/dev/views/search.html', function(response, status, xhr) {
            if (status == "error") {
                $('#outer').html("<p>加载搜索页面失败。</p>");
            }
        });
    }

    /* 加载主页 */
    function loadHomePage() {
        $('#outer').load('/dev/views/home.html', function(response, status, xhr) {
            if (status == "error") {
                $('#outer').html("<p>加载主页面失败。</p>");
            }
        });
    }

    /* 加载收藏页 */
    function loadStarPage() {
        $('#outer').load('/dev/views/star.html', function(response, status, xhr) {
            if (status == "error") {
                $('#outer').html("<p>加载收藏页面失败。</p>");
            }
        });
    }

    /* 加载登录页 */
    function loadLoginPage() {
        $('#outer').load('/dev/views/login.html', function(response, status, xhr) {
            if (status == "error") {
                $('#outer').html("<p>加载登录页面失败。</p>");
            }
        });
    }
</script>

</body>
</html>